<template>
  <div id="my_upload">
    <el-upload
      :action="IMG_URL + '/files-anon'"
      :data="{
        ossType: 'LOCAL',
      }"
      list-type="picture-card"
      :on-success="successFn"
      :on-error="errorFn"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :limit="1"
      :class="{ hide: hideUpload }"
      :http-request="uploads"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
import { compress } from "../../assets/js/tool"
import {Message} from "element-ui";
import * as CommonAction from '@/api/common'
export default {
  props: {
    imgUrl: {
      required: false,
      type: String,
    }
  },
  data() {
    return {
      IMG_URL: process.env.VUE_APP_IMG_URL,
      BASE_URL_WG_FILE: process.env.VUE_APP_IMG_URL,
      // imageUrl: "",
      dialogImageUrl: "",
      fileList: [],
      hideUpload: false, // 是否能继续上传图片-
    }
  },
  watch: {
    imgUrl: {
      immediate: true,
      handler(val) {
        if (val) {
          let arr = []
          let obj = {
            url: val,
            name: val,
          }
          arr.push(obj)
          this.fileList = arr
          this.hideUpload = true
        } else {
          this.fileList = []
          this.hideUpload = false
        }
      }
    }
  },
  methods: {
    beforeUpload (file) {
      // const isLt200KB = file.size / 1024 < 200
      const limitType = ['jpg', 'jpeg', 'png', 'pdf']
      let fileType = file.name.split('.').pop()
      fileType = fileType.toLowerCase()
      if (limitType.indexOf(fileType) === -1) {
        this.$message.error('文件格式错误！请上传图片或pdf格式文件')
      }
      return limitType.indexOf(fileType) > -1
    },
    successFn(res, file, fileList) {
      this.hideUpload = fileList.length >= 1
      // let res2 = getdata(res)
      console.log(res)

      this.$emit("mysuccess", res, file, fileList)
    },
    errorFn(err, file, fileList) {
      this.$message.error("上传失败")
    },
    // 放大e
    handlePictureCardPreview(file) {
      window.open(file.url)
      // this.dialogImageUrl = file.url
    },

    // 删除
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= 1
      this.$emit("changeImg", fileList)
    },
    uploads(obj) {
      console.log('上传调用的接口',process.env.VUE_APP_IMG_URL);
      let file = obj.file
      compress(file, async (res) => {
        let filename = new Date().getTime() + "." + res.type.split("/")[1]
        const files = new window.File([res], filename, {
          type: res.type,
        })
        let formdata = new FormData()
        formdata.append("file", files)
        formdata.append("ossType", "LOCAL")
        try {
          const result = await CommonAction.upload(formdata)
          this.$emit("success", result, files)
        } catch (e) {
          Message.error(e.message)

        }

      })
    }
  }
}
</script>
<style lang="scss">
#my_upload {
  .el-upload--picture-card {
    position: relative;
    width: 80px;
    height: 80px;
  }

  .hide .el-upload--picture-card {
    display: none;
    width: 80px;
    height: 80px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 0;
    transition: none !important;
  }

  .avatar-uploader .el-upload {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    font-size: 28px;
    color: #8c939d;
    transform: translate(-50%, -50%);
  }

  .el-icon-plus::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  .avatar {
    display: block;
  }
}
</style>
